<template>
  <div class="aiseo-writingtext-page">
    <!-- 头部导航开始 -->
    <HomeHeader></HomeHeader>
    <!-- 头部导航结束 -->
    <!-- 导航站位 -->
    <seoBanner
      bgUrl="https://oss-imag.aiseoword.com/aiseo-image/img-tab02-bannerIMG.webp"
      title="文字撰写."
      subTitle="我们将为您提供营销策略、文字撰写等综合性文字服务."
      :listArr="['100+营销专家团队', 'AI工具技术', '综合性文字服务']"
      chatInfo="您好, 我想了解更多关于文字撰写的内容"
      buttonText="撰写咨询"
    ></seoBanner>
    <div class="textBox">
      <div class="textBoxTittle">
        <!--    <div class="flex form-title">
          <div class="customized-title">内容</div>
          <div class="serve-title ml-4">撰写难题</div>
          <div class="Horizontal ml-4"></div>
        </div>
        <div style="font-family: Poiret One; color: #9d9d9d; font-size: 24px">
          obstacle on producing
        </div> -->
        <img
          src="@/assets/image/writingtext/img／tab02／title／obstacle@2x.png"
          alt=""
          style="width: 248px; height: 88px; object-fit: cover"
        />
        <div
          style="
            text-align: center;
            font-size: 20px;
            color: #808080;
            margin-top: 59px;
            width: 1000px;
            letter-spacing: 1px;
            line-height: 36px;
            font-family: Alibaba PuHuiTi-Regular;
          "
        >
          你是否还在为内容输出质量而苦恼呢？策划的文案有流量的没深度，有深度的没流量，有深度有流量但没规模？既要又要还要的内容标准，真的能实现吗？当然可以！
        </div>
        <div class="area-01">
          <div class="area-item">
            <!-- <img class="order-img" src="@/assets/image/pageHome/img1.png" alt="" /> -->
            <!-- <span></span> -->
            <img src="@/assets/image/writingtext/img1.png" alt="" />
            <p>成体系地批量产出内容存在困难</p>
            <div class="area-item-disc">
              对于新企业或新产品,快速抢占市场、短期内扩大认知覆盖是初级阶段最大的需求。而对于内容创作工作来说，数量和质量往往是一个悖论，成体系批量产出优质内容，对于小团队和初创公司来几乎是不可能完成的任务。
            </div>
          </div>
          <div class="area-item">
            <img src="@/assets/image/writingtext/img4.png" alt="" />
            <p>整体策略有效性难以确定</p>
            <div class="area-item-disc">
              内容撰写背后是整体营销策略引导，而完整策略往往涵盖了目标定位/受众分析/内容创意/分发渠道/效果评估等多个环节;
              这些环节相互影响, 需要专业团队进行系统性运营以保障其有效执行。
            </div>
          </div>
        </div>
        <div class="area-02">
          <div class="area-outer">
            <div class="area-inner">
              <img
                class="area-img"
                src="@/assets/image/writingtext/img3.png"
                alt=""
              />
              <p>文字撰写效率低下</p>
              <div class="area-item-two">
                优秀的文字内容要求写作者既要有卓越的写作能力，还要对企业和产品有深入的了解，同时对行业趋势及竞品也要有充分的认知。多层要求之下，文字撰写效率直线降低，质量和数量均无法达到预期。
              </div>
            </div>
          </div>
          <div class="area-outer">
            <div class="area-inner">
              <img
                class="area-img"
                src="@/assets/image/writingtext/img2.png"
                alt=""
              />
              <p>品牌故事差异化程度欠佳</p>
              <div class="area-item-two">
                大部分内容创作者缺乏品牌思维和商业模式认知，导致文稿仅仅停留在短期营销层面，缺乏长线品牌形象认知塑造。低质量品牌故事的输出不仅对企业形象提升毫无帮助，甚至可能会为之后企业形象打造埋下隐患。
              </div>
            </div>
          </div>
          <div class="area-outer">
            <div class="area-inner">
              <img
                class="area-img"
                src="@/assets/image/writingtext/img5.png"
                alt=""
              />
              <p>文章价值难以提升</p>
              <div class="area-item-two">
                大部分营销文章始终停留在利己层面，这使得文章价值难以提升。有价值的文章应是流量和质量双赢，即以读者想要的方式，将客户的价值点进行有效的输出。这需要的不仅是写作者技巧的提升，更是认知的升级。
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="simple">
      <img
        class="title-img"
        src="@/assets/image/writingtext/img／tab02／chooseUsPart／comb_title／red@2x.png"
        alt=""
      />
      <p class="disc mt-20" style="text-align: center">
        作为专业的网络推广营销平台，我们深耕营销领域多年，核心团队曾服务过潮玩、文创、地产、教育、区块链、快消等多领域品牌头部企业，拥有丰富的整合营销&事件营销经验，能为您的企业系统性快速输出优质内容，帮助您抢占市场先机，拓展客户认知。
      </p>
      <div class="swipper-content">
        <div class="swipper-left-mask"></div>
        <div class="swipper-handle">
          <div
            class="swipper-left-arrow swipper-arrow"
            @click="changeSwipper('left')"
          >
            <el-icon>
              <ArrowLeftBold />
            </el-icon>
          </div>
          <div
            class="swipper-right-arrow swipper-arrow"
            @click="changeSwipper('right')"
          >
            <el-icon>
              <ArrowRightBold />
            </el-icon>
          </div>
        </div>
        <div class="swipper-item-outer" ref="swipperRef" style="left: -160px">
          <div
            class="swipper-item"
            v-for="(item, index) in carouselList"
            :key="index"
          >
            <div class="logo-img">
              <img
                class="logo-images"
                :src="item.img"
                alt=""
                style="width: 100%; height: 100%"
              />
              <div @click="handleOpenChat" class="button-outer">
                <el-button class="learn-more">了解更多</el-button>
              </div>
            </div>
            <img
              class="swipper-title-img"
              :src="item.titleImg"
              alt=""
              style="width: 121px; height: 27px; margin-top: 30px"
            />
            <div style="font-weight: bold; font-size: 24px; color: #ffffff">
              {{ item.title }}
            </div>
            <p class="swipper-item-disc">{{ item.disc }}</p>
          </div>
        </div>
        <div class="swipper-right-mask"></div>
      </div>
    </div>
    <div class="flex justify-content" style="width: 100%; height: 80px">
      <img
        src="@/assets/image/situation.png"
        alt=""
        style="width: 1200px; height: 100%; object-fit: cover"
      />
    </div>
    <div class="aiseo-home-serviceProcess">
      <div class="buttonConsultation" @click="handleOpenChat()">
        <div class="buttonConsultation-inner">
          看完了？点这里立即与客服沟通!
        </div>
      </div>
    </div>
    <!-- 底部开始 -->
    <HomeFooter></HomeFooter>
    <!-- 底部结束 -->
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import seoBanner from "@/components/seoCustomer/banner/index.vue";
import { ArrowLeftBold, ArrowRightBold } from "@element-plus/icons-vue";
import img1 from "@/assets/image/writingtext/filimg1.webp";
import img2 from "@/assets/image/writingtext/filimg2.webp";
import img3 from "@/assets/image/writingtext/filimg3.webp";
import img4 from "@/assets/image/writingtext/filimg4.webp";
import img5 from "@/assets/image/writingtext/filimg5.webp";
import swipperTitle1 from "@/assets/image/writingtext/img／tab02／chooseUsCard／text／analyze@2x.png";
import swipperTitle2 from "@/assets/image/writingtext/img／tab02／chooseUsCard／text／planning@2x.png";
import swipperTitle3 from "@/assets/image/writingtext/img／tab02／chooseUsCard／text／emphasize@2x.png";
import swipperTitle4 from "@/assets/image/writingtext/img／tab02／chooseUsCard／text／assistofAI@2x.png";
import swipperTitle5 from "@/assets/image/writingtext/img／tab02／chooseUsCard／text／feedback@2x.png";
import titleImg1 from "@/assets/image/writingtext/img1.png";
import titleImg2 from "@/assets/image/writingtext/img2.png";
import titleImg3 from "@/assets/image/writingtext/img3.png";
import titleImg4 from "@/assets/image/writingtext/img4.png";
import titleImg5 from "@/assets/image/writingtext/img5.png";
import EventBus from "@/utils/eventBus.js";
import HomeHeader from "@/components/homePage/header/index.vue";
import HomeBanner from "@/components/homePage/banner/index.vue";
import HomeFooter from "@/components/homePage/footer/index.vue";
const handleOpenChat = (e) => {
  if (e == undefined) e = "文字撰写";
  EventBus.emit("openCustomerChat", {
    message: "您好，我想了解更多关于文字撰写的内容",
  });
};
const carouselList = ref([
  {
    img: img1,
    titleImg: swipperTitle1,
    title: "传播定位分析",
    disc: "专家团队基于品牌定位和大数据，提供行业和受众分析，建立用户画像，有差异性的表达品牌的延展价值与媒体、公众、行业关注的价值点产生利益关联。",
  },
  {
    img: img2,
    titleImg: swipperTitle2,
    title: "整体策略规划",
    disc: "帮助您系统性地制定策略，基于企业现有情况及行业、竞品等情况分析梳理、规划排期，选择适合您的方案及整体实施路径.",
  },
  {
    img: img3,
    titleImg: swipperTitle3,
    title: "内容增强优化",
    disc: "针对特定的传播渠道和目标人群，匹配不同的内容切入角度，增强标题吸引力，优化核心关键词和大数据标签，促进媒体选用，增强搜索端的长尾价值展现.",
  },
  {
    img: img4,
    titleImg: swipperTitle4,
    title: "AI工具辅助",
    disc: "大模型提供拼写和语法检查、风格调整、自动摘要、文本生成和翻译支持。通过语义分析和校对建议，AI帮助编辑优化内容、丰富表达，并确保文章符合读者预期.",
  },
  {
    img: img5,
    titleImg: swipperTitle5,
    title: "效果反馈分析",
    disc: "借助国内和海外媒体监测平台及时把握传播效果，纵穿企业年度传播的总况，及时调整传播节奏与策略达成最优传播目标.",
  },
]);
const swipperRef = ref();
const curIndex = ref(3);
const changeSwipper = (flag) => {
  if (flag === "left") {
    curIndex.value--;
    swipperRef.value.style.transition = "all .5s";
    swipperRef.value.style.left = -160 + (3 - curIndex.value) * 460 + "px";
    //点击时index自增
    if (curIndex.value <= 3) {
      curIndex.value = 3;
      setTimeout(() => {
        let last = carouselList.value.pop();
        carouselList.value.unshift(last);
        swipperRef.value.style.transition = "none";
        swipperRef.value.style.left = -160 + (3 - curIndex.value) * 460 + "px";
      }, 500); //定时器时间设置为500毫秒，与过渡时间相等
    }
  } else {
    curIndex.value++;
    swipperRef.value.style.transition = "all .5s";
    swipperRef.value.style.left = -160 + (3 - curIndex.value) * 460 + "px";
    if (curIndex.value >= carouselList.value.length - 2) {
      curIndex.value = carouselList.value.length - 2;
      setTimeout(() => {
        let last = carouselList.value.shift();
        carouselList.value.push(last);
        swipperRef.value.style.left = -160 + (3 - curIndex.value) * 460 + "px";
        swipperRef.value.style.transition = "none";
      }, 500); //定时器时间设置为500毫秒，与过渡时间相等
    }
  }
};
</script>
<style lang="scss" scoped>
.aiseo-writingtext-page {
  display: flex;
  flex-direction: column;
  align-items: center;

  .aiseo-writingtext-main {
    width: 100%;
  }
}

.textBox {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 53px;
}

.textBoxTittle {
  width: 80%;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
}

.form-title {
  color: #1a1a1a;
  align-items: baseline;
  font-family: HelloFont WenYiHei, HelloFont WenYiHei;
  font-weight: bold;
  font-size: 32px;

  .customized-title {
    font-family: HelloFont WenYiHei;
    font-weight: 400;
    font-size: 48px;
  }

  .serve-title {
    font-family: HelloFont WenYiHei;
    font-weight: 400;
    font-size: 32px;
  }

  .Horizontal {
    width: 16px;
    height: 4px;
    background: #e62e3d;
  }
}

.aiseo-home-serviceProcess {
  width: 100%;
  height: 319px;
  display: flex;
  align-items: center;
  justify-content: center;

  .buttonConsultation {
    margin: 120px auto;
    width: 528px;
    height: 79px;
    border-radius: 50px;
    border: 3px solid #1a1a1a;
    text-align: center;
    line-height: 79px;
    color: #1a1a1a;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    transition: width 0.3s linear;

    /* 添加过渡效果 */
    .buttonConsultation-inner {
      width: 100%;
      height: 100%;
      border-radius: 40px;
      transition: width 0.3s linear;
      /* 添加过渡效果 */
    }
  }

  .buttonConsultation:hover {
    width: 716px;
    height: 87px;
    color: #ffffff;
    border: 3px solid #e62e3d;
    padding: 2px;
    box-sizing: border-box;
    transition: width 0.3s linear;
    /* 添加过渡效果 */

    .buttonConsultation-inner {
      background: #e62e3d;
      transition: width 0.3s linear;
      /* 添加过渡效果 */
    }
  }
}

.simple {
  width: 100%;
  background: #2e2e2e;
  border-radius: 0px 0px 0px 0px;
  padding: 88px 0;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  z-index: 1;

  .title-img {
    width: 40%;
    margin: 0 auto;
    display: block;
  }

  .disc {
    width: $aiseoHomeWidth;
    font-family: Alibaba PuHuiTi-Regular;
    font-weight: 400;
    font-size: 20px;
    color: #808080;
    line-height: 32px;
    margin: 0 auto;
    letter-spacing: 0.5px;
  }

  .swipper-content {
    max-width: 1920px;
    margin: 0 auto;
    height: 879px;
    margin-top: 80px;
    position: relative;
    overflow: hidden;
    &:hover {
      .swipper-arrow {
        display: block;
      }
    }

    .swipper-left-mask {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
      width: 480px;
      height: 879px;
      background: linear-gradient(
        90deg,
        #2e2e2e 0%,
        rgba(46, 46, 46, 0.6) 50%,
        rgba(46, 46, 46, 0) 100%
      );
    }

    .swipper-right-mask {
      position: absolute;
      right: 0;
      top: 0;
      z-index: 2;
      width: 480px;
      height: 879px;
      background: linear-gradient(
        90deg,
        rgba(46, 46, 46, 0) 0%,
        rgba(46, 46, 46, 0.6) 50%,
        #2e2e2e 100%
      );
    }

    .swipper-item-outer {
      display: flex;
      position: absolute;
      transition: all 0.3;

      .swipper-item {
        width: 400px;
        position: relative;

        &:hover {
          .logo-images {
            border: 2px solid #ffffff;
            border-radius: 15px;
            box-sizing: border-box;
          }

          .logo-img {
            .button-outer {
              opacity: 1;
              bottom: 40px;
              transition: all 0.3s ease;
              display: flex;
            }
          }

          .swipper-item-disc {
            color: #ffffff !important;
          }
        }

        & + .swipper-item {
          margin-left: 60px;
        }

        .logo-img {
          width: 400px;
          height: 600px;
          border-radius: 12px;
          position: relative;

          .button-outer {
            position: absolute;
            bottom: 0px;
            left: 50%;
            transform: translate(-50%);
            z-index: 3;
            width: 218px;
            height: 57px;
            border-radius: 30px;
            display: flex;
            opacity: 0;
            align-items: center;
            justify-content: center;
            transition: all 0.5s;
            box-sizing: border-box;

            .learn-more {
              width: 170px;
              height: 49px;
              border-radius: 29px;
              border: 2px solid #ffffff;
              background: none;
              font-weight: 300;
              font-size: 18px;
              color: #ffffff;
              transition: all 0.5s;
              box-sizing: border-box;
            }

            &:hover {
              border: 2px solid #e62e3d;
              padding: 2px;
              transition: all 0.5s;

              .learn-more {
                background: #e62e3d;
                border: none;
                width: 208px;
                transition: all 0.5s;
              }
            }
          }
        }

        .swipper-item-disc {
          font-size: 16px;
          color: #7c7c7c;
        }

        .title-img {
          height: 27px;
        }

        h3 {
          font-family: Alibaba PuHuiTi-Regular;
          font-weight: bold;
          font-size: 24px;
          line-height: 24px;
          color: #ffffff;
        }

        p {
          width: 300px;
          font-family: Alibaba PuHuiTi-Regular;
          font-weight: 400;
          font-size: 16px;
          color: #ffffff;
          line-height: 28px;
          margin-top: 16px;
        }
      }
    }
    .swipper-handle {
      width: 1000px;
      position: absolute;
      top: 290px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      justify-content: space-between;
      z-index: 3;
    }

    .swipper-arrow {
      display: none;
      z-index: 3;
      font-size: 32px;
      line-height: 56px;
      text-align: center;
      color: #ffffff;
      cursor: pointer;
      border-radius: 12px 12px 12px 12px;
      border: 4px solid #ffffff;
      width: 56px;
      height: 56px;
      // position: absolute;
      // top: 290px;
      box-sizing: border-box;

      &:hover {
        border: 0;
        background: #e62e3d;
        line-height: 64px;
      }
    }
  }
}

.textBoxWen {
  margin-top: 24px;
  width: 240px;
  border: 2px solid #1a1a1a;
  padding: 38px 26px;
  font-size: 16px;
  color: #333333;
  height: 300px;
  letter-spacing: 3px;
  line-height: 32px;
}
.area-01 {
  width: $aiseoHomeWidth;
  height: 293px;
  margin-top: 80px;
  //   border-bottom: 2px dotted #808080;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  text-align: left;
  .area-item {
    &:first-child {
      .area-item-disc {
        width: 600px;
      }
    }
    &:last-child {
      width: 400px;
    }
  }
}
.area-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  > img {
    height: 27px;
    transform: translateX(-10px);
  }
  > p {
    font-family: Alibaba PuHuiTi-Bold;
    font-weight: bold;
    font-size: 24px;
    color: #1a1a1a;
    line-height: 28px;
  }
  .area-item-disc {
    font-family: Alibaba PuHuiTi-Regular;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    line-height: 32px;
    border: 2px solid #1a1a1a;
    margin-top: 24px;
    height: 172px;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
  }
}
.area-02 {
  display: flex;
  height: 550px;
  width: $aiseoHomeWidth;
  text-align: left;
  .area-outer {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    .area-inner {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    // & + .area-outer {
    //   border-left: 2px dotted #808080;
    // }
    .area-img {
      height: 27px;
      margin-top: 60px;
      transform: translateX(-10px);
    }
    p {
      font-family: Alibaba PuHuiTi-Regular;
      font-weight: bold;
      font-size: 24px;
      color: #1a1a1a;
      line-height: 24px;
    }
    .area-item-two {
      border: 2px solid #1a1a1a;
      width: 240px;
      height: 300px;
      box-sizing: border-box;
      padding: 16px;
      margin-top: 24px;
      font-family: Alibaba PuHuiTi-Regular;
      font-weight: 400;
      font-size: 16px;
      color: #333333;
      line-height: 32px;
    }
  }
}
</style>

